<template>
	<view>
		<view v-if="!isLoad" class="demo-banner demo-bg gui-dark-bg-level-3 gui-border-radius"
			:style="{'height':height+'rpx'}"
		></view>
		<view v-if="isLoad">
			<gui-swiper
				:swiperItems="swiperItems" 
				imgMode="scaleToFill" 
				:width="750"
				:spacing="0" 
				borderRadius="0"
				:height="height"></gui-swiper>
		</view>
		<view v-if="showspace" class="demo-space"></view>
	</view>
</template>

<script>
	var img = "https://images.unsplash.com/photo-1661956602868-6ae368943878?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2MHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=90";
	export default {
		name:"page-demo",
		props:{
			height:{
				type:Number,
				default:230
			},
			showspace:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				isLoad:false,
				swiperItems : [
					{
						img : img,
						url : '',
						title:"测试标题 001",
						opentype : 'navigate'
					},
					{
						img : img,
						url : '',
						title:"测试标题 002",
						opentype : 'navigate'
					},
					{
						img : img,
						url : '',
						title:"测试标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长",
						opentype : 'navigate'
					},
				],
			};
		},
		methods:{
			swiperchange : function(e){
				console.log(e);
			},
			taped : function(e){
				uni.showToast({
					title:"您点击了第 "+e+" 个项目", icon:"none"
				});
			}
		},
		created() {
			setTimeout(()=>{
				this.isLoad = true
			},1000)
		}
	}
</script>

<style scoped lang="scss">

</style>
